<template>
  <CommonCard title="今日用户交易数" :value="reportData.userToday">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <span>退货率</span>
      <span class="css-1">{{ reportData.returnRate }}%</span>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import CommonCard from './CommonCard.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})

const option = ref({})

const renderChart = (data) => {
  option.value = {
    title: {
      name: '今日用户交易数',
      show: false,
    },
    xAxis: {
      type: 'category',
      show: false,
      data: [
        '00:00',
        '03:00',
        '05:00',
        '07:00',
        '09:00',
        '11:00',
        '13:00',
        '15:00',
        '17:00',
        '19:00',
        '21:00',
        '23:00',
      ],
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {},
    series: {
      name: '实时数据',
      type: 'bar',
      data: data,
    },
  }
}

watch(props, () => {
  renderChart(props.reportData.orderUserTrend)
})
</script>

<style scoped></style>
